<template>
  <div class="rightTop">
    <span class="newTime">{{time}}</span>
    <div class="newDate">
      <p>{{date}}</p>
      <p>{{week}}</p>
    </div>
    <div class="weather">
      <div class="weather_left">
        <div>
          <img src="../../../assets/weather0.png">
          天气：{{wea}}
        </div>
        <div>
          <img src="../../../assets/weather1.png">
          限行：{{limitNumber}}
        </div>
      </div>
      <div class="weather_right">
        <div>
          <img src="../../../assets/weather2.png">
          温度：{{tem_night}}~{{tem_day}}℃
        </div>
        <div>
          <img src="../../../assets/weather3.png">
          空气质量：{{air}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'


  export default {
    name: 'weather',
    data() {
      return {
        time: '',
        date: '',
        week: '',
        wea: '',
        limitNumber: '',
        tem_night: '',
        tem_day: '',
        air:'',
      }
    },
    mounted() {
      this.getWeather();
      this.getTime();
      this.getDate();
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    methods: {
      getWeather() {
        axios({
          method: 'get',
          url: 'https://www.tianqiapi.com/free/day?appid=57633343&appsecret=1IxrZSOh',
        }).then((res) => {
          this.wea = res.data.wea;
          this.tem_day = res.data.tem_day;
          this.tem_night = res.data.tem_night;
          let air = res.data.air;
          if(air <= 50) {
            this.air = "优";
          }
          else if (50 < air <= 100) {
            this.air = "良";
          }
          else if (100 < air <= 150) {
            this.air = "轻度污染";
          }
          else if (150 < air <= 200) {
            this.air = "中度污染";
          }
          else if(200 < air <= 300) {
            this.air = "重度污染";
          }
          else if (air > 300) {
            this.air = "严重污染";
          }
        })
      },
      getTime() {
        let _this = this;
        this.timer = setInterval(() => {
          let newTime = new Date();
          let hours = newTime.getHours();
          let minutes = newTime.getMinutes();
          let seconds = newTime.getSeconds();
          if(hours < 10) {
            hours = '0' + hours;
          }
          if(minutes < 10) {
            minutes = '0' + minutes;
          }
          if(seconds < 10) {
            seconds = '0' + seconds
          }
          _this.time = hours +':' + minutes +':' + seconds
        }, 1000)
      },
      getDate() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let week = date.getDay();
        if(month < 10) {
          month = '0' + month;
        }
        if(day < 10) {
          day = '0' + day;
        }
        switch(week) {
          case 0:
            this.week = "周日";
            this.limitNumber = "不限行";
            break;
          case 1:
            this.week = "周一";
            this.limitNumber = "4 / 9";
            break;
          case 2:
            this.week = "周二";
            this.limitNumber = "5 / 0";
            break;
          case 3:
            this.week = "周三";
            this.limitNumber = "1 / 6";
            break;
          case 4:
            this.week = "周四";
            this.limitNumber = "2 / 7";
            break;
          case 5:
            this.week = "周五";
            this.limitNumber = "3 / 8";
            break;
          case 6:
            this.week = "周六";
            this.limitNumber = "不限行";
            break;
        }
        this.date = year + '年' + month + '月' + day + '日'
      },
    }
  }
</script>
<style scoped>
  /* .rightTop{
    position: relative;
  } */
  .newTime {
    color: #fff;
    display: inline-block;
    /* font-size: 20px; */
    font-size: 2.9rem;
    position: absolute;
    top: 26.01%;
    left: 23.65%;
  }
  .newDate {
    position: absolute;
    left: 53.51%;
    top: 23%;
    color:#fff;
    font-size: 1.4rem;
  }
  .newDate p {
    margin: 0.4rem 0;
  }
  .weather {
    color:#09CCDE;
    /* border: 1px solid red; */
    font-size: 1.8rem;
    /* transform: translateX(-50%); */
    position: absolute;
    left: 7rem;
    top: 12.9rem;
    /* bottom: 5.4rem; */
    /* margin-left: 50%; */
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /* align-content: space-between; */
  }
  .weather img {
    height: 1.8rem;
    margin-right: 10px;
  }
  .weather_left {
    margin-right: 3.2rem;
  }
  .weather div div {
    margin-bottom: 10px;
  }
</style>
